class Pintu {
  static async create(options) {
    const instance = new Pintu(options)
    await instance.initialize()
    return instance
  }

  constructor(options) {
    this.canvas = options.canvas
    this.ctx = this.canvas.getContext('2d')
    this.options = options
    this.polygons = []
    
    // 绑定事件处理函数
    this.handleDrop = options.ondrop
    this.handleClick = options.onclick
    this.handleSelect = options.onselect
  }

  async initialize() {
    // 初始化画布尺寸
    this.canvas.width = this.canvas.parentElement.clientWidth
    this.canvas.height = this.canvas.parentElement.clientHeight
    
    // 初始化事件监听
    this.initEvents()
    
    // 首次渲染
    this.render()
  }

  initEvents() {
    // 实现拖放
    this.canvas.addEventListener('dragover', (e) => {
      e.preventDefault()
    })
    
    this.canvas.addEventListener('drop', (e) => {
      e.preventDefault()
      const files = e.dataTransfer.files
      if (files.length > 0) {
        const rect = this.canvas.getBoundingClientRect()
        const x = e.clientX - rect.left
        const y = e.clientY - rect.top
        this.handleDrop?.(this.getPolygonAtPoint(x, y), files)
      }
    })
    
    // 实现点击
    this.canvas.addEventListener('click', (e) => {
      const rect = this.canvas.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top
      const polygon = this.getPolygonAtPoint(x, y)
      if (polygon) {
        this.handleClick?.(polygon)
      }
    })
  }

  // eslint-disable-next-line no-unused-vars
  getPolygonAtPoint(x, y) {
    // TODO: 实现点击检测逻辑
    // 现在简单返回第一个多边形，后续可以根据坐标判断点击了哪个多边形
    return this.polygons[0]
  }

  config(options) {
    Object.assign(this.options, options)
    if (options.template) {
      this.createPolygons(options.template)
    }
    this.render()
  }

  // eslint-disable-next-line no-unused-vars
  createPolygons(template) {
    // 如果是模板图片，创建带有模板的多边形
    const polygon = {
      image: null,
      rotate: 0,
      scale: 1,
      opacity: 1,
      template: template.image, // 保存模板图片引用
      setImage(img) {
        this.image = img
      }
    }
    
    polygon.setImage = polygon.setImage.bind(polygon)
    this.polygons = [polygon]
  }

  render() {
    // 清空画布
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    
    // 绘制背景
    this.ctx.fillStyle = this.options.backgroundColor
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
    
    this.polygons.forEach(polygon => {
      if (polygon.template && polygon.image) {
        this.ctx.save()
        
        // 计算缩放比例，使模板适应画布
        const templateWidth = polygon.template.width
        const templateHeight = polygon.template.height
        const scaleX = (this.canvas.width * 0.8) / templateWidth
        const scaleY = (this.canvas.height * 0.8) / templateHeight
        const scale = Math.min(scaleX, scaleY)
        
        const scaledWidth = templateWidth * scale
        const scaledHeight = templateHeight * scale
        const centerX = this.canvas.width / 2
        const centerY = this.canvas.height / 2

        // 创建临时画布用于遮罩
        const maskCanvas = document.createElement('canvas')
        maskCanvas.width = this.canvas.width
        maskCanvas.height = this.canvas.height
        const maskCtx = maskCanvas.getContext('2d')

        // 在临时画布上绘制模板作为遮罩
        maskCtx.drawImage(
          polygon.template,
          centerX - scaledWidth / 2,
          centerY - scaledHeight / 2,
          scaledWidth,
          scaledHeight
        )

        // 创建临时画布用于图片变换
        const imageCanvas = document.createElement('canvas')
        imageCanvas.width = this.canvas.width
        imageCanvas.height = this.canvas.height
        const imageCtx = imageCanvas.getContext('2d')

        // 在临时画布上进行图片变换
        imageCtx.save()
        imageCtx.translate(centerX, centerY)
        imageCtx.rotate(polygon.rotate * Math.PI / 180)
        imageCtx.scale(polygon.scale, polygon.scale)
        
        const width = polygon.image.width
        const height = polygon.image.height
        imageCtx.drawImage(
          polygon.image,
          -width / 2,
          -height / 2,
          width,
          height
        )
        imageCtx.restore()

        // 应用遮罩
        this.ctx.save()
        this.ctx.drawImage(maskCanvas, 0, 0)
        this.ctx.globalCompositeOperation = 'source-in'
        this.ctx.globalAlpha = polygon.opacity
        this.ctx.drawImage(imageCanvas, 0, 0)
        this.ctx.restore()
      }
      
      this.ctx.restore()
    })
  }
}

export default Pintu